<template>
  <div class="app-case-container">
    <!--工具栏-->
    <div class="head-container lm-opts-rtght">
      <crudOperation>
        <div slot="right">
          <el-input placeholder="请输入内容" style="width:150px;display:inline-block;" suffix-icon="el-icon-search"></el-input>
          <!-- <el-input placeholder="请选择日期" style="width:150px;display:inline-block;" suffix-icon="el-icon-date"></el-input> -->
          <el-date-picker v-model="query.createDate" value-format="yyyy-MM-dd" style="width:150px;display:inline-block;" type="date" placeholder="选择日期" suffix-icon="el-icon-date"></el-date-picker>
        </div>
        <rrOperation slot="optsLeft" :crud="crud"></rrOperation>
      </crudOperation>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" stripe :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="createDate" sortable label="创建时间">
          <template slot-scope="scope">
            {{ new Date(scope.row.createDate).format('yyyy-MM-dd hh:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column prop="id" sortable label="阶段编号"></el-table-column>
        <el-table-column prop="recordType" sortable label="诊疗阶段">
          <template slot-scope="scope">
            {{ dict.label.record_type[scope.row.recordType] }}
          </template>
        </el-table-column>
        <el-table-column prop="phase" sortable label="治疗阶段">
          <!-- <template slot-scope="scope">
            {{ dict.label.medical_phase[scope.row.phase] }}
          </template> -->
        </el-table-column>
        <el-table-column prop="productName" sortable label="矫治器"></el-table-column>
        <el-table-column prop="openCase" sortable label="病例详情">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="()=>{ openCase(scope.row) }">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination></pagination>
    </div>
    <el-dialog title="病例详情" :visible.sync="addVisible" width="1200px">
      <AddPatient :params="params" @goBack="addVisible =false"></AddPatient>
    </el-dialog>
  </div>

</template>

<script>
import crudPatient from '@/api/patient';
import CRUD, { presenter, header, crud } from '@crud/crud';
import rrOperation from '@crud/RR.operation';
import crudOperation from '@crud/CRUD.operation';
// import udOperation from '@crud/UD.operation';
import pagination from '@crud/Pagination';
// import DateRangePicker from '@/components/DateRangePicker';
import { mapGetters } from 'vuex';

import AddPatient from '@/views/components/addPatient';
import {
  queryOper,
  queryPatient,
  queryOrg,
  queryDoctor,
  queryPatientDel
} from '@/api/operPatient';

// const defaultForm = { id: null, patientName: null, gender: null, birthDay: null, compliance: null, parent: null, relationship: null, parentProfession: null, parentMobile: null, orthodonticHis: null, createDate: null, doctorId: null, clinicId: null, deptId: null, tags: null, star: null, photoUrl: null, productRuleId: null, packageRuleId: null, archived: null };
export default {
  name: 'Case',
  components: { pagination, crudOperation, rrOperation, AddPatient },
  mixins: [presenter(), header(), crud()],
  dicts: [
    'gender',
    'patient_compliance',
    'patient_parent_rel',
    'patient_archive',
    'medical_phase', // 诊疗阶段
    'record_type' // 诊疗阶段
  ],
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  cruds() {
    return CRUD({
      title: 'PatientService',
      url: '/patient/medicalRecord/query',
      sort: 'id,desc',
      crudMethod: { ...crudPatient },
      props: { searchToggle: false },
      optShow: { add: false, download: false, reset: false },
      queryOnPresenterCreated: false,
      optRightShow: {
        search: false,
        refresh: false
      }
    });
  },
  data() {
    return {
      rules: {
      },
      searchTools: [],
      productNameList: [],
      addVisible: false
    };
  },
  computed: {
    ...mapGetters([
      'autoPath',
      'menusCode',
      'codes'
    ])
  },
  mounted() {
    this.query.patientId = this.params.id;
    this.initParam();
    this.crud.toQuery();
    this.searchTools = this.menusCode[this.codes.DOC_WORK] && this.menusCode[this.codes.DOC_WORK].children;
  },
  methods: {
    openCase(row) {
      this.addVisible = true;
    },
    initParam() {
      queryOper('product/configList', { productName: '' })
        .then((res) => {
          this.productNameList = res;
        })
        .catch((er) => {});
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    },
    searchButton(item) {
      console.warn(item.code, item.name);
    }
  }
};
</script>

<style lang="scss" scoped>
.app-case-container {
  .head-container {
    .crud-opts{
      .crud-opts-right{
        width: auto !important;
      }
    }

    // .search-tools {
    //   .tools-all {
    //     //   margin-top:10px;
    //     vertical-align: top;
    //   }
    //   .tools-right {
    //     display: inline-block;
    //     border-left: 1px solid #e6e6e6;
    //     padding-left: 10px;
    //     .tools-group {
    //       .group-btns {
    //         display: inline-block;
    //         margin-left: 30px;
    //         margin-bottom: 20px;
    //         .btn {
    //           margin-right: 30px;
    //         }
    //       }
    //     }
    //   }
    // }
  }
}
</style>
